<!doctype html>
<!--
@license
Copyright 2020 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
<head>
  <title>MWC Menu Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
  <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" as="style" type="text/css">
  <link rel="preload" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" as="style" type="text/css">
  <script type="module" src="index.js"></script>
  <script nomodule src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <script nomodule src="index.es5.js"></script>
  <style>
    .unresolved main {
      opacity: 0;
    }
  </style>
  <link href="../shared/shared.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
  <style>
    body {
      height: 90vh;
    }

    main > div {
      margin-bottom: 16px;
    }

    .scrollable {
      border: solid 1px black;
      overflow-y: scroll;
      height: 100px;
    }

    .scrollable .spacer {
      height: 1000px;
    }

    #absoluteX, #absoluteY {
      width: 100px;
    }
  </style>
</head>
<body class="unresolved">
  <demo-header component="Menu" package="menu"></demo-header>

  <main>

    <div style="position:relative;">
      <mwc-button id="basicButton" raised label="Open Basic Menu"></mwc-button>
      <mwc-menu id="basicMenu">
        <mwc-list-item>one</mwc-list-item>
        <mwc-list-item>two</mwc-list-item>
        <mwc-list-item>three</mwc-list-item>
        <mwc-list-item disabled><div>four</div></mwc-list-item>
        <li divider></li>
        <mwc-list-item>aaa</mwc-list-item>
        <mwc-list-item>bbb</mwc-list-item>
      </mwc-menu>
    </div>

    <div style="position:relative;">
      <mwc-button
          id="cornerButton"
          raised
          label="Open Menu With Corner">
      </mwc-button>
      <mwc-menu id="cornerMenu">
        <mwc-list-item>one</mwc-list-item>
        <mwc-list-item>two</mwc-list-item>
        <mwc-list-item>three</mwc-list-item>
        <mwc-list-item disabled><div>four</div></mwc-list-item>
        <li divider></li>
        <mwc-list-item>aaa</mwc-list-item>
        <mwc-list-item>bbb</mwc-list-item>
      </mwc-menu>

      <mwc-select outlined id="cornerSelect" label="Menu Corner">
        <mwc-list-item selected></mwc-list-item>
        <mwc-list-item value="TOP_LEFT">TOP_LEFT</mwc-list-item>
        <mwc-list-item value="TOP_RIGHT">TOP_RIGHT</mwc-list-item>
        <mwc-list-item value="BOTTOM_LEFT">BOTTOM_LEFT</mwc-list-item>
        <mwc-list-item value="BOTTOM_RIGHT">BOTTOM_RIGHT</mwc-list-item>
        <mwc-list-item value="TOP_START">TOP_START</mwc-list-item>
        <mwc-list-item value="TOP_END">TOP_END</mwc-list-item>
        <mwc-list-item value="BOTTOM_START">BOTTOM_START</mwc-list-item>
        <mwc-list-item value="BOTTOM_END">BOTTOM_END</mwc-list-item>
      </mwc-select>
    </div>

    <div style="position:relative;">
      <mwc-button id="quickButton" raised label="Open Quick Menu"></mwc-button>
      <mwc-menu quick id="quickMenu">
        <mwc-list-item>one</mwc-list-item>
        <mwc-list-item>two</mwc-list-item>
        <mwc-list-item>three</mwc-list-item>
        <mwc-list-item disabled><div>four</div></mwc-list-item>
        <li divider></li>
        <mwc-list-item>aaa</mwc-list-item>
        <mwc-list-item>bbb</mwc-list-item>
      </mwc-menu>
    </div>

    <div class="scrollable">
      <span>
        <mwc-button id="fixedButton" raised label="Open Fixed Menu"></mwc-button>
        <mwc-menu fixed id="fixedMenu">
          <mwc-list-item>one</mwc-list-item>
          <mwc-list-item>two</mwc-list-item>
          <mwc-list-item>three</mwc-list-item>
          <mwc-list-item disabled><div>four</div></mwc-list-item>
          <li divider></li>
          <mwc-list-item>aaa</mwc-list-item>
          <mwc-list-item>bbb</mwc-list-item>
        </mwc-menu>
      </span>

      <span style="position:relative;">
        <mwc-button id="nonfixedButton" raised label="Open Non-Fixed Menu"></mwc-button>
        <mwc-menu id="nonfixedMenu">
          <mwc-list-item>one</mwc-list-item>
          <mwc-list-item>two</mwc-list-item>
          <mwc-list-item>three</mwc-list-item>
          <mwc-list-item disabled><div>four</div></mwc-list-item>
          <li divider></li>
          <mwc-list-item>aaa</mwc-list-item>
          <mwc-list-item>bbb</mwc-list-item>
        </mwc-menu>
      </span>
      <div>Open each menu and then scroll this div</div>
      <div class="spacer"></div>
    </div>

    <div>
      <mwc-button id="absoluteButton" raised label="Open Absolute Menu (no anchor)"></mwc-button>
      <mwc-menu
          absolute
          x="0"
          y="0"
          id="absoluteMenu">
        <mwc-list-item>one</mwc-list-item>
        <mwc-list-item>two</mwc-list-item>
        <mwc-list-item>three</mwc-list-item>
        <mwc-list-item disabled><div>four</div></mwc-list-item>
        <li divider></li>
        <mwc-list-item>aaa</mwc-list-item>
        <mwc-list-item>bbb</mwc-list-item>
      </mwc-menu>

      <mwc-textfield
          type="number"
          label="x"
          outlined
          id="absoluteX"
          value="0">
      </mwc-textfield>
      <mwc-textfield
          type="number"
          label="y"
          outlined
          id="absoluteY"
          value="0">
      </mwc-textfield>
    </div>

    <div style="position:relative;">
      <mwc-button id="activatableButton" raised label="Open Activatable Menu"></mwc-button>
      <mwc-menu activatable id="activatableMenu">
        <mwc-list-item>one</mwc-list-item>
        <mwc-list-item>two</mwc-list-item>
        <mwc-list-item>three</mwc-list-item>
        <mwc-list-item disabled><div>four</div></mwc-list-item>
        <li divider></li>
        <mwc-list-item>aaa</mwc-list-item>
        <mwc-list-item>bbb</mwc-list-item>
      </mwc-menu>
    </div>

    <div style="position:relative;">
      <mwc-button id="multiButton" raised label="Open Multi (activatable) Menu"></mwc-button>
      <mwc-menu multi activatable id="multiMenu">
        <mwc-list-item selected activated>one</mwc-list-item>
        <mwc-list-item>two</mwc-list-item>
        <mwc-list-item selected activated>three</mwc-list-item>
        <mwc-list-item disabled><div>four</div></mwc-list-item>
        <li divider></li>
        <mwc-list-item>aaa</mwc-list-item>
        <mwc-list-item>bbb</mwc-list-item>
      </mwc-menu>
    </div>

    <div style="position:relative;">
      <style>
        #groupedMenu mwc-list-item:not([selected]) mwc-icon {
          display: none;
        }
      </style>

      <mwc-button id="groupedButton" raised label="Open Grouped Menu"></mwc-button>
      <mwc-menu multi id="groupedMenu">
        <mwc-list-item selected group="a" graphic="icon">
          <mwc-icon slot="graphic">check</mwc-icon>
          <span>a-one</span>
        </mwc-list-item>
        <mwc-list-item group="a" graphic="icon">
          <mwc-icon slot="graphic">check</mwc-icon>
          <span>a-two</span>
        </mwc-list-item>
        <mwc-list-item group="a" graphic="icon">
          <mwc-icon slot="graphic">check</mwc-icon>
          <span>a-three</span>
        </mwc-list-item>
        <li divider></li>
        <mwc-list-item selected group="b" graphic="icon">
          <mwc-icon slot="graphic">check</mwc-icon>
          <span>b-one</span>
        </mwc-list-item>
        <mwc-list-item group="b" graphic="icon">
          <mwc-icon slot="graphic">check</mwc-icon>
          <span>b-two</span>
        </mwc-list-item>
      </mwc-menu>
    </div>

    <div style="position:relative;">
      <mwc-button
          id="dfsButton"
          raised
          label="Open Menu With Default Focus">
      </mwc-button>
      <mwc-menu id="dfsMenu">
        <mwc-list-item>one</mwc-list-item>
        <mwc-list-item>two</mwc-list-item>
        <mwc-list-item>three</mwc-list-item>
        <mwc-list-item disabled><div>four</div></mwc-list-item>
        <li divider></li>
        <mwc-list-item>aaa</mwc-list-item>
        <mwc-list-item>bbb</mwc-list-item>
      </mwc-menu>

      <mwc-select outlined id="dfsSelect" label="Menu Default Focus">
        <mwc-list-item value="NONE">NONE</mwc-list-item>
        <mwc-list-item value="LIST_ROOT" selected>LIST_ROOT</mwc-list-item>
        <mwc-list-item value="FIRST_ITEM">FIRST_ITEM</mwc-list-item>
        <mwc-list-item value="LAST_ITEM">LAST_ITEM</mwc-list-item>
      </mwc-select>
    </div>

    <div>
      <h3>
        Absolute w/ anchor
      </h3>
      <div>This is reusing the same menu and changing the anchor</div>
      <mwc-button
          id="absoluteLeftButton"
          raised
          label="anchor = this">
      </mwc-button>
      <mwc-button
          id="absoluteRightButton"
          raised
          label="anchor = this">
      </mwc-button>
      <mwc-menu absolute id="absoluteAnchorMenu">
        <mwc-list-item>one</mwc-list-item>
        <mwc-list-item>two</mwc-list-item>
        <mwc-list-item>three</mwc-list-item>
        <mwc-list-item disabled><div>four</div></mwc-list-item>
        <li divider></li>
        <mwc-list-item>aaa</mwc-list-item>
        <mwc-list-item>bbb</mwc-list-item>
      </mwc-menu>
    </div>
  </main>
  <script>

  </script>
</body>
</html>
